<template>
	<div class="popupReview">
		<el-button
			v-if="showBtn"
			@click="showDialog"
			v-bind="$attrs"
		>
			<slot>查看</slot>
		</el-button>
		<el-dialog
			class="d1"
			:title="title"
			:visible.sync="visible"
			append-to-body
			width="800px"
			@close="onClose"
		>
			<div v-if="form.name">
				<div class="item">
					<div class="name">名称:</div>
					<div class="value">{{form.name}}</div>
				</div>
				<div class="item">
					<div class="name">编号:</div>
					<div class="value">{{form.num}}</div>
				</div>
				<div
					class="item"
					:class="getStyle(form.warning.x)"
				>
					<div class="name">X偏移:</div>
					<div class="value">{{form.x}}</div>
				</div>
				<div
					class="item"
					:class="getStyle(form.warning.h)"
				>
					<div class="name">H偏移:</div>
					<div class="value">{{form.h}}</div>
				</div>
				<div
					class="item"
					:class="getStyle(form.warning.y)"
				>
					<div class="name">Y偏移:</div>
					<div class="value">{{form.y}}</div>
				</div>
				<div class="item">
					<div class="name">水平位移:</div>
					<div class="value">{{form.a}}</div>
				</div>
				<div class="item">
					<div class="name">三维位移:</div>
					<div class="value">{{form.b}}</div>
				</div>
				<div class="item">
					<div class="name">位置:</div>
					<div class="value">{{form.postr}}</div>
				</div>
				<div class="item">
					<div class="name">时间:</div>
					<div class="value">{{form.time}}</div>
				</div>
				<div
					class="item"
					:class="getStyle(form.level)"
				>
					<div class="name">告警等级:</div>
					<div class="value">{{getTxt(form.level)}}</div>
				</div>
			</div>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					size="small"
					@click="visible = false"
				>关 闭</el-button>
			</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	/* 客户详情写新跟进 */
	export default {
		props: {
			showBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: false,
				visible: false,
				title: "告警详情",
				form: {},
				rules: {}
			};
		},
		methods: {
			onClose() {
				// this.$refs["form"].clearValidate();
			},
			showDialog(info) {
				this.form = { ...info };
				this.visible = true;
			},
			getStyle(level) {
				let ret = "";
				switch (level) {
					case 1:
						ret = "color-blue";
						break;
					case 2:
						ret = "color-yellow";
						break;
					case 3:
						ret = "color-red";
						break;
					default:
						break;
				}
				return ret;
			},
			getTxt(level) {
				let ret = "正常";
				switch (level) {
					case 1:
						ret = "一级预警";
						break;
					case 2:
						ret = "二级预警";
						break;
					case 3:
						ret = "三级预警";
						break;
					default:
						break;
				}
				return ret;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.item {
		display: flex;
		color: #323232;
		line-height: 1.9;
		.name {
			width: 100px;
			font-weight: bold;
			text-align: right;
			margin-right: 10px;
		}
	}
</style>
